<template>
    <!-- html -->
    <div class="person">
        <h3>this is person</h3>
        <h3>{{ name }}</h3>
        <h3>{{ age }}</h3>
        <hr />
        <h3>{{ a }}</h3>
        <h3>{{ b }}</h3>
        <button @click="updateName">修改年龄</button>
        <button @click="updateAge">修改名字</button>
        <button @click="showtel">查看联系方式</button>
        <button @click="showOld">老语法</button>
    </div>
</template>

<script lang="ts">
// js或者ts
export default {
    name: 'Person',  //组件名

    //vue2 写法 选项式（配置项）api
    //数据
    data() {
        //console.log("this is person")
        return {
            // name: '张三',
            // age: 18,
            // tel: '1388888888888'
            a: 500,
            b: this.name
        }
    },
    //函数 初始化：生命周期、事件、但数据代理还未开始 
    // beforeCreate() {
    //     //debugger;  //断点
    // },
    //初始化：数据监测、数据代理  函数 
    created() { 

    },
    //函数  此时页面呈现的是未经vue编译的dom结构
    beforeMount() {
        console.log("beforeMount")
        //debugger;
    },
    //vue完成模板的解析 并把初始的真实Dom元素放入页面后（挂载完成）调用mounte构d方法  此时页面呈现的是vue编译的dom结
    mounted() {
        console.log("beforeMount")
        //debugger;
    },
    beforeUpdate() {  //此时数据是心得，页面是旧的，页面尚未和数据保持同步
        console.log("beforeUpdate");
        console.log("update变了");
        //debugger;
    },
    updated() {      //此时数据是新的，页面也是新的，页面和数据保持同步
        console.log("updated");
        //debugger;
    },
    //此时vm中 所有的实列 data   methods 指令 都处于可用状态
    beforeDestroy() {
        // debugger;
    },
    //Vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
    destroyed() {
        // debugger;
    },
    //检测属性
    watch: {

    },
    //计算属性
    computed: {
    },
    //方法
    methods: {
        // showtel() {
        //     console.log(this.tel)
        // },
        // updateAge() {
        //     this.name = this.name + 1
        // },
        // updateName() {
        //     this.age = this.age + 1
        // }

        showOld() {
            console.log("测试老语法")
            // this.showtel()
        }
    },

    //vue3 组合式Api开发
    //vue3中 已经弱化 this 了

    //vue2和vue3写法可以共存 vue2的data可以访问setup的数据 ，但是setup不能访问 vue2 中data的数据，
    // 因为setup最早的生命周期，在 beforeCreate（生命周期、事件、但数据代理还未开始 ） 之前
    
    //函数 初始化：生命周期、事件、但数据代理还未开始 
    beforeCreate() {
        //debugger;  //断点
    },
    //最早的生命周期 , 在 beforeCreate 之前
    setup() {
        let name = '张三'
        let age = 18
        let tel = '1388888888888'

        function showtel() {
            console.log(tel)
        }
        function updateAge() {
            name = name + 1
        }
        function updateName() {
            age = age + 1
        }

        return { name, age, showtel, updateAge, updateName }

        //函数方法返回渲染
        //return () => '哈哈'
    }
}
</script>

<style>
/* 样式 */
.person {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>